<template>
  <div class="payPassword">
    <top :text="'修改支付密码'"></top>
    <div class="payPasswordTip">
      <div v-if="step==1">
        <div class="mT50" style="text-align: center">
          <span class="password">请输入原支付密码</span>
        </div>
        <ul class="inputSty">
          <li>
            <input type="password" maxlength="1" v-focus v-model="oldPay1">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="oldPay2">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="oldPay3">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="oldPay4">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="oldPay5">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="oldPay6">
          </li>
        </ul>
        <div style="padding:15px;margin-top:100px;">
          <div class="exitLogin" @click="setStep">下一步</div>
        </div>
      </div>
      <div v-if="step==2">
        <div class="mT50" style="text-align: center">
          <span class="password">请设置支付密码,用于支付验证</span>
        </div>
        <ul class="inputSty">
          <li>
            <input type="password" maxlength="1" v-model="payPwd1">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="payPwd2">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="payPwd3">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="payPwd4">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="payPwd5">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="payPwd6">
          </li>
        </ul>
        <div style="padding:15px;margin-top:100px;">
          <div class="exitLogin" @click="payStep">完成</div>
        </div>
      </div>
      <div v-if="step==3">
        <div class="mT50" style="text-align: center">
          <span class="password">请再次输入密码</span>
        </div>
        <ul class="inputSty" id="wrap">
          <li>
            <input type="password" maxlength="1" v-model="confimPwd1" class="input">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="confimPwd2" class="input">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="confimPwd3" class="input">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="confimPwd4" class="input">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="confimPwd5" class="input">
          </li>
          <li>
            <input type="password" maxlength="1" v-model="confimPwd6" class="input">
          </li>
        </ul>
        <div style="padding:15px;margin-top:100px;">
          <div class="exitLogin" @click="completeBtn">完成</div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import { XHeader } from 'vux'
  import util from '../../service/util'
  import http from '../../service/http.js'
  import tips from '../../service/tips.js'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {
        step: 1,
        oldPay: "",
        oldPay1: "",
        oldPay2: "",
        oldPay3: "",
        oldPay4: "",
        oldPay5: "",
        oldPay6: "",
        payPwd: "",
        payPwd1: "",
        payPwd2: "",
        payPwd3: "",
        payPwd4: "",
        payPwd5: "",
        payPwd6: "",
        confimPwd: "",
        confimPwd1: "",
        confimPwd2: "",
        confimPwd3: "",
        confimPwd4: "",
        confimPwd5: "",
        confimPwd6: "",
      }
    },
    mounted() {
      var txts = document.querySelectorAll("input")
      for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        t.index = i;
        t.setAttribute("readonly", true);
        t.onkeyup = function () {
          this.value = this.value.replace(/^(.).*$/, '$1');
          var next = this.index + 1;
          if (next > txts.length - 1) return;
          txts[next].removeAttribute("readonly");
          txts[next].focus();
        }
      }
      txts[0].removeAttribute("readonly");
    },
    methods: {
      setStep() {
        if (!(this.oldPay1 && this.oldPay2 && this.oldPay3 && this.oldPay4 && this.oldPay5 && this.oldPay6)) {
          tips.tips("请输入原支付密码");
          return false;
        }
        this.step = 2;
      },
      payStep() {
        if (!(this.payPwd1 && this.payPwd2 && this.payPwd3 && this.payPwd4 && this.payPwd5 && this.payPwd6)) {
          tips.tips("请输入支付密码");
          return false;
        }
        this.step = 3;
      },
      completeBtn() {
        if (!(this.confimPwd1 && this.confimPwd2 && this.confimPwd3 && this.confimPwd4 && this.confimPwd5 && this.confimPwd6)) {
          tips.tips("请输入支付密码");
          return false;
        }
        this.oldPay = this.oldPay1 + this.oldPay2 + this.oldPay3 + this.oldPay4 + this.oldPay5 + this.oldPay6;
        this.payPwd = this.payPwd1 + this.payPwd2 + this.payPwd3 + this.payPwd4 + this.payPwd5 + this.payPwd6;
        this.confimPwd = this.confimPwd1 + this.confimPwd2 + this.confimPwd3 + this.confimPwd4 + this.confimPwd5 + this.confimPwd6;
        http.post("/user/payPwd", {
          oldPay: util.md5(this.oldPay),
          payPwd: util.md5(this.payPwd),
          confirm: util.md5(this.confimPwd)
        }).then((res) => {
          if (res.data.status == 200) {
            tips.tips("支付密码修改成功");
            setTimeout(() => {
              history.back();
            }, 3000)
          } else {
            tips.tips(res.data.msg);
          }
        })
      }
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    },
    components: {
      XHeader,
      Top
    }
  }
</script>
<style lang="less" scoped>
  body {
    background: none !important;
  }

  .payPassword .c9 {
    color: #999;
  }

  .payPassword .fa {
    position: absolute;
  }

  .payPassword .fr {
    position: relative;
  }

  .payPassword .fr15 {
    right: 15px;
  }

  .payPassword .t20 {
    top: 20px;
  }

  .payPassword .t10 {
    top: 10px;
  }

  .payPassword .mT10 {
    margin-top: 10px;
  }

  .payPassword .middle {
    vertical-align: middle;
  }

  .payPassword .mT50 {
    margin-top: 50px;
  }

  .payPassword .mt15 {
    margin-top: 15px;
  }

  .payPassword .mgL8 {
    margin-left: 8px;
  }

  .payPassword .mgb15 {
    margin-bottom: 15px;
  }

  .payPassword .mgT5 {
    margin-top: 5px;
  }

  .payPassword .copyBtn {
    color: #fff;
    background: linear-gradient(left, #fedd32, #fe9f0a);
    display: inline-block;
    width: 50px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    top: 12px;
  }

  .payPassword .helpLower {
    transition: all 0.5s;
    transform: rotate(180deg);
  }

  .payPassword .password {
    color: #999;
    font-size: 16px;
  }

  .payPassword .vux-header {
    background: #fff;
  }

  .payPassword .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .payPassword .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .payPassword .exitLogin {
    color: #fff;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: linear-gradient(left, #fedd32, #fe9e09);
    background: -webkit-gradient(linear, left top, right top, from(#fedd32), to(#fe9e09));
    border-radius: 25px;
    font-size: 22px;
  }

  .inputSty {
    margin-top: 25px;
  }

  .inputSty li {
    float: left;
    list-style: none;
    width: 13%;
    height: 40px;
    display: inline-block;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    /* padding-left: 10px; */
    background: #fff;
    input {
      text-align: center;
    }
  }

  .inputSty li:first-child {
    margin-left: 9%;
  }

  .inputSty li:last-child {
    border-right: 1px solid #333;
  }

  .inputSty li input {
    border: none;
    outline: none;
    width: 100%;
    height: 40px;
    display: inline-block;
  }

  .payPasswordTip {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #f6f6f6 !important;
  }
</style>